<template>
  <div class="main"
       ref="bigbox">
    <div class="serbox">
      <div class="left">
        <el-select v-model="demandType">
          <el-option label="我发布的"
                     value="0"></el-option>
          <el-option label="我领取的"
                     value="1"></el-option>
        </el-select>
        <el-button type="primary"
                   style="margin-left:15px"
                   size="medium"
                   @click="chotype">查询</el-button>
      </div>
      <div class="btns">
        <el-button type="primary"
                   @click="openpop(1)">添加需求</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData"
                stripe
                style="width: 100%">
        <el-table-column type="index"
                         width="100"
                         label="序号">
        </el-table-column>
        <el-table-column prop="title"
                         label="标题">
        </el-table-column>
        <el-table-column prop="intro"
                         label="描述">
        </el-table-column>
        <el-table-column prop="caAt"
                         label="时间">
        </el-table-column>
        <el-table-column prop="typeName"
                         label="类型名称">
        </el-table-column>
        <el-table-column prop="name"
                         label="联系人">
        </el-table-column>
        <el-table-column prop="phone"
                         label="联系电话">
        </el-table-column>
        <el-table-column prop="city"
                         label="地区">
        </el-table-column>
        <el-table-column label="操作"
                         width="150">
          <template slot-scope="scope">
            <el-button @click="chodel(scope.row.id)"
                       type="text"
                       style="color:red"
                       size="small">删除</el-button>
            <el-button @click="openpop(scope.row)"
                       type="text"
                       size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <div class="btns">
      </div>
      <el-pagination background
                     @current-change="changePage"
                     :current-page.sync="page"
                     :page-size="pageSize"
                     layout="total,prev,pager,next,jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="需求管理"
               :visible.sync="pop"
               width="45%">
      <el-form label-width="120px"
               :rules="rules"
               ref="popform"
               :model="popform">
        <el-form-item label="需求类型"
                      prop="typeId">
          <el-select v-model="popform.typeId"
                     :disabled="disabled"
                     placeholder="请选择需求类型">
            <el-option v-for="item in classlist"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="需求标题"
                      prop="title">
          <el-input v-model="popform.title"
                    placeholder="请输入需求标题"
                    :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="描述"
                      prop="intro">
          <el-input type="textarea"
                    v-model="popform.intro"
                    placeholder="请输入需求描述"
                    :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="公司名称"
                      prop="company">
          <el-input v-model="popform.company"
                    placeholder="请输入公司名称"
                    :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="联系人"
                      prop="name">
          <el-input v-model="popform.name"
                    placeholder="请输入联系人"
                    :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="联系电话"
                      prop="phone">
          <el-input v-model="popform.phone"
                    placeholder="请输入联系电话"
                    :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="地区"
                      prop="city">
          <el-input v-model="popform.city"
                    placeholder="请输入地区，如：北京市"
                    :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item v-if="!disabled">
          <el-button type="primary"
                     @click="submit('popform')">确 定</el-button>
          <el-button @click="pop=false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      demandType: "0",
      url: "", // 请求地址
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      pop: false,
      disabled: false,
      classlist: [], // 类型列表
      popform: {
        title: "",
        intro: "",
        company: "",
        name: "",
        phone: "",
        city: '',
        typeId: ""
      },
      rules: {
        typeId: [{ required: true, message: '请选择需求类型', trigger: 'change' }],
        title: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
        intro: [{ required: true, message: '请输入需求描述', trigger: 'blur' }],
        company: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        name: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[0-9]{10}$/, message: '联系电话输入有误', trigger: 'blur' }],
        city: [{ required: true, message: '请输入地区，如：北京市', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    this.getClass();
    this.getlist();
  },
  methods: {
    // 获取需求分类
    getClass () {
      this.$postRequest("/mall/menNeedType/list", {}).then(res => {
        this.classlist = res.data;
      })
    },
    // 获取需求列表
    getlist () {
      if (this.demandType == "0") {
        this.url = "/mall/menNeedInfo/list"
      } else if (this.demandType == "1") {
        this.url = "/mall/menNeedUser/list"
      };
      this.$postRequest(this.url, {
        shopId: sessionStorage.getItem("shopId"),
        pageNum: this.page,
        pageSize: this.pageSize
      }).then(res => {
        this.total = res.total;
        this.tableData = res.rows;
        for (var i = 0; i < res.rows.length; i++) {
          res.rows[i].caAt = this.$util.gettime(new Date(res.rows[i].caAt));
        }
      })
    },
    // 删除需求
    chodel (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postRequest("/mall/menNeedInfo/remove", {
          id: id,
          shopId: sessionStorage.getItem("shopId")
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getlist();
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    openpop (e) {
      this.pop = true
      if (e == 1) {
        this.popform = {
          title: "",
          intro: "",
          company: "",
          name: "",
          phone: "",
          city: '',
          typeId: ""
        }
        this.disabled = false;
      } else {
        this.disabled = true;
        this.popform = {
          title: e.title,
          intro: e.intro,
          company: e.company,
          name: e.name,
          phone: e.phone,
          city: e.city,
          typeId: e.typeId
        }
      }
    },
    submit (popform) {
      this.$refs[popform].validate((valid) => {
        if (valid) {
          this.$postRequest("/mall/menNeedInfo/add", {
            shopId: sessionStorage.getItem("shopId"),
            title: this.popform.title,
            intro: this.popform.intro,
            company: this.popform.company,
            city: this.popform.city,
            name: this.popform.name,
            phone: this.popform.phone,
            typeId: this.popform.typeId
          }).then(res => {
            if (res.code == 200) {
              this.$message.success("发布成功");
              this.pop = false;
              this.getlist();
            }
          })
        } else {
          return false;
        }
      });
    },
    // 分页
    changePage (e) {
      this.$refs.bigbox.parentElement.scrollTo(0, 0);
      this.getlist();
    },
    // 筛选领取/发布
    chotype () {
      this.page = 1;
      this.getlist();
    },
  }

}
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-button--primary {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-button--text {
  color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner,
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  color: #333;
  cursor: default;
  background-color: transparent;
}
/deep/ .el-textarea__inner {
  min-height: 100px !important;
}
.main {
  margin: 20px;
  background: #fff;
}
.serbox {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
  }
  .inp {
    width: 200px;
    margin-left: 20px;
  }
}
.table {
  margin: 20px;
  border: 1px solid #eee;
  .img {
    height: 50px;
    width: 50px;
  }
}
.page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.popimg {
  height: 120px;
  width: 120px;
}
</style>